<template>
  <div>
    <div :style="{ height: '30px' }"></div>
    <!-- <a-table
      :data-source="dataSource"
      :columns="columns"
      :pagination="false"
    /> -->
    <rule-table> </rule-table>
  </div>
</template>

<script>
let keyIndex = 1
const genKey = () => {
  return `key-${keyIndex++}`
}

export default {
  name: 'tableTest10',
  components: { RuleTable },
  props: {},
  data() {
    const initDataSource = [
      { a: 1, b: 2, c: 3, key: genKey() },
      { a: 11, b: 12, c: 13, key: genKey() },
      { a: 21, b: 22, c: 23, key: genKey() },
    ]

    const initColumns = [
      {
        title: 'aa',
        dataIndex: 'a',
      },
      {
        title: 'bb',
        dataIndex: 'b',
      },
      {
        title: 'cc',
        dataIndex: 'c',
      },
    ]

    const rowFactors = [
      { name: 'f1', title: 'this is f1', values: ['a', 'b'] },
      { name: 'f2', title: 'f22', values: ['1', '2', '3'] },
      { name: 'f3', title: '33', values: ['啊', '把'] },
    ]

    const buildDataSource = (factors, initDatas) => {
      return [...initDatas]
    }

    const buildColumns = (factors, initCols) => {
      const factorCols = factors.map((factor) => {
        return { title: factor.title, dataIndex: factor.name }
      })
      return [...factorCols, ...initCols]
    }

    const dataSource = buildDataSource(rowFactors, initDataSource)
    const columns = buildColumns(rowFactors, initColumns)

    return {
      dataSource,
      columns,
    }
  },
  methods: {},
}
</script>

<style></style>
